<template>
    <a-modal
        v-model:visible="showModal"
        :width="820"
        :destroyOnClose="true"
        :maskClosable="false"
        :confirmLoading="loading"
        :footer="null"
        @cancel="handleCancle"
    >
        <div class="heartbeatModel-head">
            {{ t(`yl.priceTagName`) }} <span>{{ formState.deviceCode }}</span> {{ t(`yl.heartbeatRecord`) }}
            <a-select v-model:value="tableQuery.online" :placeholder="t('yl.status')" style="width: 120px" @change="handStatus">
                <a-select-option v-for="(item, index) in statusList" :key="index">
                    {{ item.label }}
                </a-select-option>
            </a-select>
        </div>
        <a-table
            :columns="columns"
            :data-source="dataSource"
            :row-key="setRowKey"
            :pagination="pagination"
            :loading="loading"
            @change="handleTableChange"
        >
            <template v-for="item in columns" :key="item.dataIndex" v-slot:[item.slotName]>
                <span>{{ t(`yl.${item.slotName}`) }}</span>
            </template>
            <template #online="{ record }">
                <span>{{ record.online == true ? t('yl.online') : t('yl.offline') }}</span>
            </template>
        </a-table>
    </a-modal>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, watch, toRefs } from 'vue';
import { useI18n } from 'vue-i18n';
import _ from 'lodash';
import ylTreeselectVue from '@/components/ylTreeselect.vue';
import columns from './heartbeatModelColumns';
import { getStateRecordData } from '@/api/device';
import { TableState, CheckAble, Pagination, PaginationQuery } from '@/types/table';

interface DeptState {
    deviceCode: string | number;
    specsCode: string | number;
}

export default defineComponent({
    name: 'roleModel',
    components: {
        ylTreeselectVue,
    },
    props: {
        visible: {
            type: Boolean,
            default: () => false,
        },
        title: {
            type: String,
        },
        loading: {
            type: Boolean,
            default: () => false,
        },
        dept: {
            type: Object,
        },
    },
    emits: ['submit', 'cancle'],
    setup(props, { emit }) {
        const { t } = useI18n();
        const statusList = reactive([
            {
                value: false,
                label: '离线',
            },
            {
                value: true,
                label: '在线',
            },
        ]);
        // 角色信息
        const tableQuery: PaginationQuery = reactive({
            page: 0,
            size: 9,
            sort: 'id,desc',
            deviceCode: '',
            online: null,
        });
        const state: TableState = reactive({
            dataSource: [],
            pagination: {
                total: 0,
                current: computed(() => tableQuery.page + 1),
            },
        });

        const showModal = computed(() => props.visible);
        // 设置table row key
        const setRowKey = (record: { [x: string]: any }) => record.id;

        const formState: DeptState = reactive({
            deviceCode: '',
            specsCode: '',
        });

        // 编辑时赋值
        watch(
            () => props.dept,
            (dept) => {
                console.log(dept);
                const { deviceCode, specsCode } = dept as DeptState;
                tableQuery.deviceCode = deviceCode;
                formState.deviceCode = specsCode;
                getHeartbeatData(tableQuery);
            }
        );

        // 表单校验

        // 取消
        const handleCancle = () => {
            return emit('cancle');
        };
        // 获取table数据
        const getHeartbeatData = async (tableQuery: PaginationQuery) => {
            state.loading = true;
            const { content, totalElements } = await getStateRecordData(tableQuery);
            state.loading = false;
            state.dataSource = content;
            state.pagination.total = totalElements;
        };
        // 页码改变
        const handleTableChange = (pagination: Pagination) => {
            const { current } = pagination;
            tableQuery.page = current - 1;
            getHeartbeatData(tableQuery);
        };
        // 页码改变
        const handStatus = () => {
            tableQuery.online ? (tableQuery.online = true) : (tableQuery.online = false);
            getHeartbeatData(tableQuery);
        };

        return {
            showModal,
            columns,
            formState,
            statusList,
            ...toRefs(state),
            tableQuery,
            t,
            handStatus,
            handleCancle,
            setRowKey,
            handleTableChange,
        };
    },
});
</script>
<style lang="scss" scoped>
.heartbeatModel-head {
    font-size: 14px;
    font-weight: bold;
    .heartbeatModel-head > span {
        color: #fe6700;
    }
}
</style>
